<template>
	<div class="footer">
		<ul class="item-wrapper">
			<router-link
				v-for="(item,index) in tabs"
				:key="index"
				tag="li"
				class="item"
				:to="item.url"
			>
					{{item.name}}
			</router-link>
		</ul>
	</div>
</template>
<script>
export default {
	data () {
		return {
			tabs: [
				{
					'url': '/waterList',
					'name': '清洗列表'
				},
				{
					'url': '/user',
					'name': '我的'
				}
			]
		}
	}
}
</script>
<style lang="stylus" scoped>
	.footer
		position: fixed
		left: 0
		right: 0
		bottom: 0
		height: .86rem
		line-height: .86rem
		background: #20d9bb
		color: #fff
		.item-wrapper
			display: flex
			.item
				flex: 1
				box-sizing: border-box
				text-align: center
				opacity: .5
			.router-link-active
				opacity: 1
</style>
